<template>

  <el-config-provider :locale="zhCn">
    <div class="list">
      <div class="query-form">
        <div>
          <!-- <el-date-picker v-model="queryForm.datejing" value-format="YYYY-MM-DD HH:mm:ss" type="date"
            placeholder="请选择巡井日期" style="width: 200px;" /> -->
          <el-select v-model="queryForm.cqddId" placeholder="请选择采气大队" class="ml-10" style="width: 200px;"
            @change="onChangeCQDD">
            <el-option v-for="item in option1" :key="item.value" :label="item.text" :value="item.value" />
          </el-select>
          <el-select v-model="queryForm.jqzId" placeholder="请选择集气站" class="ml-10" style="width: 200px;"
            @change="onChangeJQZ">
            <el-option v-for="item in option2" :key="item.value" :label="item.text" :value="item.value" />
          </el-select>
          <el-select v-model="queryForm.jingId" placeholder="请选择井场" class="ml-10" style="width: 200px;"
            @change="onChangeJingChang">
            <el-option v-for="item in option3" :key="item.value" :label="item.text" :value="item.value" />
          </el-select>
          <el-select v-model="queryForm.jingDetailId" placeholder="请选择井" class="ml-10" style="width: 200px;">
            <el-option v-for="item in option4" :key="item.value" :label="item.text" :value="item.value" />
          </el-select>
          <el-button class="query-btn" type="primary" @click="getList()">查询</el-button>
          <el-button @click="reset()">重置</el-button>
          <el-button type="warning" plain @click="onExport">导出</el-button>
        </div>
        <div></div>
      </div>
      <el-table :data="list" border>
        <el-table-column label="序号" prop="id" width="60" align="center"></el-table-column>
        <el-table-column label="采气大队" prop="cqddname"></el-table-column>
        <el-table-column label="集气站" prop="jqzname"></el-table-column>
        <el-table-column label="井场" prop="jing"></el-table-column>
        <el-table-column label="图片" prop="imgUrl">
          <template #default="{ row }">
            <el-image v-for="(item, index) in getImageList(row)" :key="index" :src="item" class="ml-10" style="width: 60px; height: 60px" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
              :preview-src-list="getImageList(row)" :initial-index="index" fit="cover" :preview-teleported="true" />
          </template>
        </el-table-column>
        <el-table-column label="存在问题" prop="remark"></el-table-column>
      </el-table>

      <div class="page-footer">
        <el-pagination v-model:current-page="pageModel.pageNum" v-model:page-size="pageModel.pageSize"
          layout="total, prev, pager, next, jumper" :total="pageModel.total" @current-change="handleCurrentChange" />
      </div>
    </div>


  </el-config-provider>


</template>


<script setup>
import { onMounted, ref } from 'vue';
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import Api from '@/api'
import { downloadFile } from '@/utils';

const list = ref([])

const queryForm = ref({
  datejing: '',
  cqddId: '',
  jqzId: '',
  jingId: '',
})

const pageModel = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0
})

const option1 = ref([])
const option2 = ref([])
const option3 = ref([])
const option4 = ref([])


const getCqddSelect = async () => {
  const { result } = await Api.getCqddSelect();
  option1.value = (result || []).map((item) => ({
    text: item.cqdd,
    value: item.id,
  }));
};

const getJqzSelect = async () => {
  const { result } = await Api.getJqzSelect({ cqddId: queryForm.value.cqddId });
  option2.value = (result || []).map((item) => ({
    text: item.jqz,
    value: item.id,
  }));
};

const getJingSelect = async () => {
  const { result } = await Api.getJingSelect({ cqddId: queryForm.value.cqddId, jqzid: queryForm.value.jqzId });
  console.log(result);
  option3.value = (result || []).map((item) => ({
    text: item.jing,
    value: item.id,
  }));
};

const getJingDetailSelect = async () => {
  const { result } = await Api.getJingDetailSelect({
    cqddId: queryForm.value.cqddId,
    jqzid: queryForm.value.jqzId,
    jingid: queryForm.value.jingId,
  });
  option4.value = (result || []).map((item) => ({
    text: item.jingdetail,
    value: item.id,
  }));
}


const getList = async () => {
  const params = {
    ...pageModel.value,
    ...queryForm.value
  }
  const { result } = await Api.selectPageJing(params)
  console.log(result);
  list.value = result.items;
  pageModel.value.total = result.total
}

const handleCurrentChange = (val) => {
  pageModel.value.pageNum = val
  getList()
}

const reset = () => {
  queryForm.value = {
    datejing: '',
    cqddId: '',
    jqzId: '',
    jingId: '',
  }
  getList()
}


const onChangeCQDD = () => {
  option2.value = [];
  option3.value = [];
  option4.value = [];
  queryForm.value.jqzId = ''
  queryForm.value.jingId = ''
  queryForm.value.jingDetailId = ''
  getJqzSelect();
}

const onChangeJQZ = () => {
  option3.value = [];
  option4.value = [];
  queryForm.value.jingId = ''
  queryForm.value.jingDetailId = ''
  getJingSelect();
}

const onChangeJingChang = () => {
  option4.value = [];
  queryForm.value.jingDetailId = ''
  getJingDetailSelect();
}


const getImageList = (row) => {
  if(row.imgurl) {
    return row.imgurl.split(',')
  }
  return []
}


const onExport = () => {
  const params = {
    ...pageModel.value,
    ...queryForm.value
  }
  downloadFile(Api.exportPageJingExcel, `井场数据列表_${new Date().getTime()}`, params)
}


onMounted(() => {
  getList()
  getCqddSelect();
})

</script>

<style lang="scss" scoped>
.list {
  padding: 10px;
  box-sizing: border-box;

  :deep(.el-table th.el-table__cell) {
    background-color: #f5f7fa;
  }

  .query-form {
    margin-bottom: 10px;
  }

  .query-btn {
    margin-left: 10px;
  }

  .ml-10 {
    margin-left: 10px;
  }
}

.page-footer {
  display: flex;
  justify-content: flex-end;
  padding: 10px;
}
</style>